import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const RigBottom: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["今日外来访客", "昨日外来访客"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["二月", "三月", "四月", "五月"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "今日外来访客",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390],
          },
          {
            name: "昨日外来访客",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290],
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ width: "100%", height: "100%" }}></div>;
};
export default RigBottom;
